<template>
  <div class="check-realname">
      <div class="container">
          <div class="userinfo-query">
               <el-form ref="userinfoForm" :model="userinfoForm" label-width="100px">
                    <el-form-item label="品牌名称">
                        <el-input disabled v-model="userinfoForm.brandName"></el-input>
                    </el-form-item>
                    <el-form-item label="真实姓名">
                        <el-input disabled v-model="userinfoForm.realname"></el-input>
                    </el-form-item>
                    <el-form-item label="手机号码">
                        <el-input disabled v-model="userinfoForm.phone"></el-input>
                    </el-form-item>
                    <el-form-item label="身份证号码">
                        <el-input disabled v-model="userinfoForm.idcard"></el-input>
                    </el-form-item>
                    <el-form-item label="银行名称">
                        <el-input v-model="userinfoForm.bankName"></el-input>
                    </el-form-item>
                    <el-form-item label="银行卡号码">
                        <el-input v-model="userinfoForm.cardNo"></el-input>
                    </el-form-item>
                    <el-form-item label="">
                        <el-button type="primary" @click="queryUserinfo">查询信息</el-button>
                    </el-form-item>
                </el-form>
          </div>
          <div class="userinfo-images" v-if="userImages.length!==0">
              <div class="img-box" v-for="(item,index) in userImages" :key="index">
                  <img class="img"  :src="item" alt="加载图片失败！">
                  <i class="turn-left turn-icon" @click="turnLeft">←</i>
                  <i class="turn-right turn-icon" @click="turnRight">→</i>
              </div>           
          </div>
          <div class="userinfo-images" v-else>
              没有图片数据
          </div>
          <div class="control-group">
              <el-button size="medium" style="margin-right:30px;width:200px" @click="passInfo" type="success">通过</el-button>
              <el-button size="medium" style="margin-right:30px;width:200px" @click="rejectInfo" type="danger">拒绝</el-button>
          </div>
          <div class="fail-check-info" v-show="checkfail">
              <div style="font-wight:700;padding:10px 0">审核失败回执</div>
              <div style="padding:10px 0">
                  <div><el-input v-model="returnNote" type="textarea"></el-input></div>  
                  <div style="text-align:center;"><el-button size="medium" type="danger" style="width:200px;margin:20px 0;" @click="setNoteinfo">发送回执</el-button></div>                  
              </div>
              <div>
                  <div class="info-item" v-for="item in noteList" :key="item" v-html="item" @click="setNote4List(item)"></div>
              </div>
          </div>
      </div>
  </div>
</template>

<script>
export default {
  name:'check-realname',
  data () {
    return {
        userinfoForm:{
            brandName:null,
            phone:null,
            idcard:null,
            bankName:null,
            cardNo:null,
            realname:null,
            userid:null
        },
        checkfail:false,
        userImages:[
            "/static/img/90.png","/static/img/90.png","/static/img/90.png"
        ],
        noteList:[
            "您的证件信息不一致，请重新上传审核",
            "请双手手持身份证以及银行卡证件照，请保持五官双臂外露，保持像素清晰",
            "您的照片涉嫌PS，请重新上传",
            "请不要自拍以免相片信息发生颠倒"
        ],
        returnNote:""
    };
  },
  props:{
      cell:{
          type:Object,
          default:function(){
              return {}
          }
      }
  },
  components: {},
  created() {
      this.init()
  },
  mounted() {},
  methods: {
      init(){
          this.userinfoForm.brandName = this.cell.brandName;
          this.userinfoForm.phone = this.cell.phone;
          this.userinfoForm.idcard = this.cell.idcard;
          this.userinfoForm.cardNo = this.cell.cardNo;
          this.userinfoForm.realname = this.cell.realname;
          this.userinfoForm.userid = this.cell.userid;
         
          // 获取用户提交的图片信息
          this.getUserImage();
      },
      getUserImage(){
          // 获取用户提交的审核图片
          let url = `user/download/realname`,
              params = `phone=${this.cell.phone}`;        
          this.$Http.post(url,params).then(res=>{
              if(res.data.resp_code ==="000000"){
                  this.userImages = res.data.result;
                  this.userinfoForm.brandName = res.data.infouser.bankName;
                  this.userinfoForm.cardNo = res.data.infouser.cardNo;
              }else{
                  this.$notify.info({
                        title: '提示',
                        message:res.data.resp_message
                  });
              }
          }).catch(err=>{
               this.$notify.error({
                    title: '错误',
                    message: "获取审核信息失败！"
               });
          })
      },
      queryUserinfo(){
          // 查询信息
          // 原版本没有写逻辑 不知道什么鬼   ┏┛墓┗┓...(((m -__-)m 
      },
      setNoteinfo(){
          // 发送回执信息
          let url = `user/update/remarks`,
                params = `userId=${this.cell.userid}&remarks=${this.returnNote}`;
            this.$Http.post(url,params).then(res=>{
                if(res.data.resp_code ==="000000"){
                    this.$message({
                        type:"success",
                        message:"成功发送审核回执!"
                    })
                    this.$emit("close-dialog")
                }else{
                    this.$notify.info({
                        title: '错误',
                        message:res.data.resp_message
                    });
                }
            }).catch(err=>{
                this.$notify.error({
                        title: '错误',
                        message: "网络出错了!"
                });
            })
      },
      setNote4List(info){
          this.returnNote = info;
      },
      rejectInfo(){
          // 拒绝
          let url = `user/updatestatus/status`,
                params = `phone=${this.cell.phone}&status=2`;
            this.$Http.post(url,params).then(res=>{
                if(res.data.resp_code ==="000000"){
                    this.$message({
                        type:"success",
                        message:"审核信息被拒绝！"
                    })
                     this.checkfail = true;
                }else{
                    this.$notify.info({
                        title: '错误',
                        message:res.data.resp_message
                    });
                }
            }).catch(err=>{
                this.$notify.error({
                        title: '错误',
                        message: "提交审核信息失败！"
                });
            })
      },
      passInfo(){
          // 通过
            let url = `user/updatestatus/status`,
                params = `phone=${this.cell.phone}&status=1`;
            this.$Http.post(url,params).then(res=>{
                if(res.data.resp_code ==="000000"){
                    this.$message({
                        type:"success",
                        message:"审核信息已通过！"
                    })
                    this.$emit("close-dialog");
                }else{
                    this.$notify.info({
                        title: '错误',
                        message:res.data.resp_message
                    });
                }
            }).catch(err=>{
                this.$notify.error({
                        title: '错误',
                        message: "提交审核信息失败！"
                });
            })
      },
      turnLeft(event){
          // 左转
          let imgBox = event.path[1].getElementsByClassName("img")[0];
          imgBox.style.transform = "rotate(-90deg) ";
      },
      turnRight(event){
          // 右转
          let imgBox = event.path[1].getElementsByClassName("img")[0];
          imgBox.style.transform = "rotate(90deg) ";
      }
        

  }
}

</script>
<style scoped>
.check-realname{
  border-top: 1px solid #ededed;
}
.container{
    padding: 20px 40px;
}
.userinfo-query{
    padding: 20px;
    border: 1px solid #ededed;
}
.userinfo-images{
    padding: 20px;
    border: 1px solid #ededed;
    text-align: center;
}
.control-group{
    padding: 20px;
    border: 1px solid #ededed;
    display: flex;
    justify-content: center;
    align-items: center;
}
.fail-check-info{
    padding: 20px;
    border: 1px solid #ededed;
}
.info-item{
    padding: 0 20px;
    border-left: 4px solid #999;
    margin-top: 10px;
    cursor: pointer;
    background-color: #efefef;
}
.img-box{
    display: inline-block;
    width: 150px;
    height: 120px;
    margin: 0 20px;
    transition: .5s all;
    position: relative;
     padding: 10px;
}
.img{
    width: 100%;
    height: 100%;
    border-radius: 5px;
}
.img-box:hover{
    transform:scale(4);
    z-index: 200;
    background-color: rgba(0,0,0,.2);
   
}
.img-box:hover .turn-icon{
    display: inline-block;
    position: absolute;
} 
.turn-icon{   
    display: none;
    width: 20px;
    height: 20px;
    top: 0;
    background-color: rgba(0,0,0,.2);
    text-align: center;
    line-height: 20px;
    color: #FFF;
    cursor: e-resize
}
.turn-left{   
    left: 0;
}
.turn-right{
    right: 0;
}
</style>